import React, {Component} from 'react';
import Topic from './components/Topic'
import List from './components/List'
import Write from './components/Write'
import Recommed from './components/Recommed'
import {connect} from "react-redux";

import {actionCreators} from './store'



import {
    HomeWarpper,
    HomeLeft,
    HomeRight,
    BackTop
} from './style'

class Home extends Component{
    handleScrollTop(){
      window.scrollTo(0,0)
    }

    render(){
        const {handleScrollTop} = this;
        return(
            <HomeWarpper>
                <HomeLeft>
                    <img className='banner-img' src="https://upload.jianshu.io/admin_banners/web_images/4466/cdb7c8a0406626043a00a91a145082a4ab8f508b.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" alt=""/>
                    <Topic></Topic>
                    <List></List>

                </HomeLeft>
                <HomeRight>
                    <Recommed></Recommed>
                    <Write></Write>
                </HomeRight>
                {
                    this.props.showScroll? <BackTop onClick={handleScrollTop}>回到顶部</BackTop>:null
                }

            </HomeWarpper>
        )
    }

    componentDidMount(){
       this.props.changHomeData();
       this.EventShow()
    }
    componentWillUnmount(){
        window.removeEventListener('scroll',this.props.changeScrollShow)
    }
    EventShow(){
      window.addEventListener('scroll',this.props.changeScrollShow)
    }
}

const mapState =(state)=>({
    showScroll:state.getIn(['home','showScroll'])
});


const mapDispatch = (dispatch)=>({
    changHomeData(){
        const action = actionCreators.getHomeInfo();
        dispatch(action)
    },
    changeScrollShow(){
        if(document.documentElement.scrollTop>400){
            dispatch(actionCreators.toggleScroll(true))
        }else{
            dispatch(actionCreators.toggleScroll(false))
        }

    }
});
export default connect(mapState,mapDispatch)(Home)